<template>
  <div class="custom-box">
    <div class="custom-title font32">业务排行</div>
    <div class="pt50 pl40 pr40 pb20">
      <div class="table-title f f-jc-b font20 p15">
        <div class="w60 t-c">排行</div>
        <div class="f-1 t-c">姓名</div>
        <div class="w100 t-c">订单数</div>
      </div>
      <div class="table-content o-a">
        <div
          v-for="(item, index) in dataList"
          :key="item.number"
          class="f f-jc-b font20 f-ai-c"
          :class="index >= 3 ? 'p15' : 'pt10 pl15 pr15'"
        >
          <div class="w60 t-c">
            <img
              v-if="index < 3"
              :src="imgList[index]"
              style="width: 42px; height: 69px"
            />
            <span v-else>{{ item.number }}</span>
          </div>
          <div class="f-1 t-c">{{ item.name }}</div>
          <div class="w100 t-c">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { businessRanking } from "@/api/srceen/home";

import gold from "@/assets/img/icon-gold.png";
import silver from "@/assets/img/icon-silver.png";
import bronze from "@/assets/img/icon-bronze.png";
export default {
  props: {
    // 日期类型
    dateType: {
      type: String,
      default: "DAY",
    },
  },
  data() {
    return {
      imgList: [gold, silver, bronze],
      dataList: [],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
    dateType() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取排名列表
    getList() {
      businessRanking({ dateType: this.dateType }).then((res) => {
        if (res.data) {
          this.dataList = res.data || [];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-box {
  width: 638px;
  height: 904px;
  background: url("../../../../assets/img/bg7.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .custom-title {
    font-family: YouSheiBlack;
    color: #45f4ff;
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
  }
  .table-title {
    color: #fff;
    background-color: #0b3248;
  }
  .table-content {
    color: #fff;
    height: 750px;
  }
}
</style>
